<template>
    <div>
        <mt-header title="玩家充值" >
            <router-link to="/homes" slot="left">
               <i class="mintui mintui-back lic-d"></i>
            </router-link>
        </mt-header>
        <!-- 搜索框 -->
        <div class="search">
            <input type="text" placeholder="请输入玩家充值ID" v-model="userId">
            <span class="mint-toast-icon mintui mintui-search dwicon" @touchend="gituserId"></span>
        </div>
         <div class="v-cloak" v-if="agentData" v-for="(item,i) in agentData" :key="i">
            <p><span>用户ID：</span><span>{{item.userId}}</span></p>
            <p><span>用户昵称：</span><span>{{item.name}}</span></p>
            <div class="clo">
                <span>当前房卡：</span><span>{{item.gems}}</span>
                <input type="text" placeholder="请输入充值数量" v-model="gems">
                <button class="ton" @touchend="postaddUserIditem">充值</button>
            </div>
        </div>
        
    </div>
</template>


<script>
import {userId,addUserIditem} from '../api/api'
import { Toast } from 'mint-ui';
export default {
    data(){
        return{
            userId:'',
            agentData:[],
            gems:''
        }
    },
    methods:{
        gituserId(){
            userId(this.userId).then(res =>{
                if(res.data.code == 1){
                        this.agentData = res.data.data
                       
                }else{
                     Toast('没有该玩家ID');
                }
                
            })
        },
        postaddUserIditem(){
            if(this.gems > 0){
                let item = {
                gems: this.gems,
                userId: this.agentData[0].userId,
                userName: this.agentData[0].name,
                agentId: sessionStorage.getItem('token')
            }
            addUserIditem(item).then(res =>{
                console.log(res.data);
                if(res.data.code == 0){
                    this.gituserId()
                    this.gems = ''
                    // this.gems = res.data.data
                    console.log(res.data);
                    alert(res.data.message)
                    
                   
                }else if(res.data.code == 1){
                    alert(res.data.message)
                }

            })
            } else{
                Toast('请输入正确的房卡');
            }
           
        }
    }
}
</script>



<style lang="less" scoped>
  a {
        text-decoration: none;
    }
    .lic-d {
        font-size: 50px;
    }
    .mint-header {
        background: -webkit-linear-gradient(left, #6180F4, #79CBFA);
        font-size: 36px;
        height: 80px;
    }
    .search {
        width: 100%;
        height: 90px;
        box-sizing: border-box;
        padding: 12px 54px;
        position: relative;
        input {
           width: 100%;
            height: 100%;
            padding-left: 20px;
            background-color: #F4F4F4;
            border: none;
            border-radius: 10px;
            outline: none;
            border-bottom: 2px solid #cccccc;
            border-top: 2px solid #cccccc;
            border-left: 2px solid #cccccc;
        }
        .dwicon {
            position: absolute;
            top: 14px;
            right: 56px;
            height: 60px;
            line-height: 60px;
            width: 100px;
            color: #fff;
            font-size: 40px;
            color: #000;
            border-radius: 10px;
            border-left: 2px solid #cccccc;
            border-right: 2px solid #cccccc;
        }
    }
    .v-cloak {
        padding: 0 20px;
        border: 2px solid #cccccc;
        border-radius: 10px;
        margin: 20px 60px;
        box-sizing: border-box;
        background-color: #fff;
        margin-bottom: 10px;
        font-size: 36px;
        p {
            padding: 0;
            margin: 0;
            color: #949494;
            font-size: 30px;
            margin-top: 12px;
        }
        .clo {
            margin-top: 24px;
            color: #949494;
            font-size: 26px;
            margin-bottom: 20px;
            input {
                width: 260px;
                height: 50px;
                background-color: #E5E5E5;
                border-radius: 10px;
                outline: 0;
                border: 0;
                border: 2px solid #cccccc;
                margin-left: 20px;
            }
            .ton {
                height: 50px;
                width: 70px;
                outline: 0;
                border: 0;
                border-radius: 10px;
                background-color: #74B1F3;
                color: #ffffff;
                float:right;
            }
        }
    }
    input::-webkit-input-placeholder {
        font-size: 28px;
        padding-left: 10px;
        color: #ccc;
    }
</style>
